<template>
  <div class="show">
	  <!-- 在美食里面插入图片 -->
	  <Category title='美食'>
		<img src="./p.jpg" alt="">
	  </Category>
	  <Category title='游戏' :listData='games'>
		<ul>
        	<li v-for="(item,index) in games" :key="index">{{item}}</li>
      	</ul>
	  </Category>
	  <Category title='电影'>
		  <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>	 
	  </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue';

export default {
	name:'App',
	components:{Category},
	data(){
		return{
			foods:['火锅','烧烤','小龙虾','冰激凌'],
			games:['王者荣耀','刺激战场','我的世界','QQ飞车'],
			films:['熊出没','小猪佩奇','武大郎烧饼','拆弹专家']
		}
	}
}
</script>

<style>
.show {
	display: flex;
	justify-content: space-around;
}

</style>